<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品商城 - 首页</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        :root {
            --primary-color: #4e73df;
            --secondary-color: #858796;
            --success-color: #1cc88a;
            --info-color: #36b9cc;
            --warning-color: #f6c23e;
            --danger-color: #e74a3b;
            --light-color: #f8f9fc;
            --dark-color: #5a5c69;
        }

        body {
            font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
            background-color: #f8f9fc;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .hero-section {
            background: linear-gradient(135deg, var(--primary-color) 0%, #667eea 100%);
            color: white;
            padding: 4rem 0;
            margin-bottom: 2rem;
        }

        .card {
            border: none;
            border-radius: 0.5rem;
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            transition: all 0.3s ease;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 0.25rem 2rem 0 rgba(58, 59, 69, 0.2);
        }

        .product-card {
            margin-bottom: 1.5rem;
            overflow: hidden;
        }

        .product-card .card-img-top {
            height: 200px;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .product-card:hover .card-img-top {
            transform: scale(1.05);
        }

        .product-price {
            font-weight: 700;
            color: var(--danger-color);
            font-size: 1.2rem;
        }

        .product-original-price {
            text-decoration: line-through;
            color: var(--secondary-color);
            font-size: 0.9rem;
        }

        .badge-hot {
            background-color: var(--danger-color);
        }

        .badge-new {
            background-color: var(--success-color);
        }

        .section-title {
            position: relative;
            padding-bottom: 0.5rem;
            margin-bottom: 1.5rem;
        }

        .section-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary-color);
        }

        .search-box {
            max-width: 600px;
            margin: 0 auto;
        }

        .search-box .input-group {
            box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.15);
            border-radius: 2rem;
            overflow: hidden;
        }

        .search-box .form-control {
            border: none;
            border-radius: 2rem;
        }

        .search-box .btn {
            border-radius: 0 2rem 2rem 0;
        }

        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 3rem 0 1rem;
            margin-top: 3rem;
        }

        .category-pill {
            display: inline-block;
            padding: 0.5rem 1rem;
            margin: 0.25rem;
            background-color: var(--light-color);
            border-radius: 2rem;
            font-size: 0.9rem;
            transition: all 0.3s ease;
        }

        .category-pill:hover {
            background-color: var(--primary-color);
            color: white;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light bg-white shadow-sm sticky-top">
        <div class="container">
            <a class="navbar-brand" href="/shop">
                <i class="bi bi-shop"></i> 商品商城
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/shop">首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/products">所有商品</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/categories">商品分类</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/shop/promotions">促销商品</a>
                    </li>
                </ul>
                <form class="d-flex me-3" action="/shop/search" method="get">
                    <input class="form-control me-2" type="search" name="keyword" placeholder="搜索商品..." th:value="${keyword}">
                    <button class="btn btn-outline-primary" type="submit">
                        <i class="bi bi-search"></i>
                    </button>
                </form>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="bi bi-person-circle"></i> 我的账户
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="/auth/login">登录</a></li>
                            <li><a class="dropdown-item" href="/auth/register">注册</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item" href="/shop/profile">个人中心</a></li>
                            <li><a class="dropdown-item" href="/shop/orders">我的订单</a></li>
                            <li><a class="dropdown-item" href="/shop/cart">购物车</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="container text-center">
            <h1 class="display-4 fw-bold mb-4">欢迎来到商品商城</h1>
            <p class="lead mb-5">发现优质商品，享受购物乐趣</p>
            <div class="search-box">
                <form action="/shop/search" method="get">
                    <div class="input-group">
                        <input class="form-control form-control-lg" type="search" name="keyword" placeholder="搜索您想要的商品..." th:value="${keyword}">
                        <button class="btn btn-warning btn-lg" type="submit">
                            <i class="bi bi-search me-2"></i>搜索
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </section>

    <!-- 分类导航 -->
    <section class="container mb-5">
        <div class="text-center mb-4">
            <h2>热门分类</h2>
        </div>
        <div class="text-center">
            <a th:each="category : ${categories}" th:href="@{/shop/category(id=${category.id})}" class="category-pill" th:text="${category.categoryName}">分类名称</a>
        </div>
    </section>

    <!-- 推荐商品 -->
    <section class="container mb-5">
        <h2 class="section-title">推荐商品</h2>
        <div class="row">
            <div class="col-md-3 col-sm-6" th:each="product : ${recommendedProducts}">
                <div class="card product-card">
                    <div class="position-relative">
                        <img th:src="${product.imageUrl ?: '/images/product-placeholder.jpg'}" class="card-img-top" th:alt="${product.productName}">
                        <div class="position-absolute top-0 end-0 p-2">
                            <span th:if="${product.isHot}" class="badge badge-hot">热销</span>
                            <span th:if="${product.isNew}" class="badge badge-new">新品</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title" th:text="${product.productName}">商品名称</h5>
                        <p class="card-text text-muted small" th:text="${product.categoryName}">分类名称</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="product-price" th:text="'¥' + ${#numbers.formatDecimal(product.salePrice, 1, 2)}">¥99.99</span>
                                <span th:if="${product.salePrice < product.purchasePrice * 1.2}" class="product-original-price ms-2" th:text="'¥' + ${#numbers.formatDecimal(product.purchasePrice * 1.2, 1, 2)}">¥129.99</span>
                            </div>
                            <a th:href="@{/shop/product/{id}(id=${product.id})}" class="btn btn-sm btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 促销商品 -->
    <section class="container mb-5">
        <h2 class="section-title">限时促销</h2>
        <div class="row">
            <div class="col-md-3 col-sm-6" th:each="product : ${promotionProducts}">
                <div class="card product-card">
                    <div class="position-relative">
                        <img th:src="${product.imageUrl ?: '/images/product-placeholder.jpg'}" class="card-img-top" th:alt="${product.productName}">
                        <div class="position-absolute top-0 start-0 p-2">
                            <span class="badge bg-danger">促销</span>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title" th:text="${product.productName}">商品名称</h5>
                        <p class="card-text text-muted small" th:text="${product.categoryName}">分类名称</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="product-price" th:text="'¥' + ${#numbers.formatDecimal(product.salePrice, 1, 2)}">¥99.99</span>
                                <span class="product-original-price ms-2" th:text="'¥' + ${#numbers.formatDecimal(product.purchasePrice * 1.2, 1, 2)}">¥129.99</span>
                            </div>
                            <a th:href="@{/shop/product/{id}(id=${product.id})}" class="btn btn-sm btn-danger">抢购</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <h5>关于我们</h5>
                    <p>商品商城致力于为用户提供优质的购物体验，精选全球好物，让购物更简单、更愉快。</p>
                </div>
                <div class="col-md-4">
                    <h5>客户服务</h5>
                    <ul class="list-unstyled">
                        <li><a href="/shop/help" class="text-white-50">帮助中心</a></li>
                        <li><a href="/shop/contact" class="text-white-50">联系我们</a></li>
                        <li><a href="/shop/return" class="text-white-50">退换货政策</a></li>
                    </ul>
                </div>
                <div class="col-md-4">
                    <h5>关注我们</h5>
                    <div>
                        <a href="#" class="text-white me-3"><i class="bi bi-wechat fs-4"></i></a>
                        <a href="#" class="text-white me-3"><i class="bi bi-sina-weibo fs-4"></i></a>
                        <a href="#" class="text-white"><i class="bi bi-envelope fs-4"></i></a>
                    </div>
                </div>
            </div>
            <hr class="my-4 bg-white">
            <div class="text-center text-white-50">
                <p>&copy; 2023 商品商城. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>